<template>
    <div class="body-container">
        <el-container class="whole">
            <!--  头部  -->
            <el-header class="header">
                <div class="title">
                    <img src="../assets/logo.png" alt="">
                    <span>电商后台管理系统</span>
                </div>
                <el-button class="loginoutBtn" @click="loginOut" type="danger">退出</el-button>

            </el-header>
            <!-- 主体 -->
            <el-container>
                <!--左边导航栏-->
                <el-aside :width="isCollapse == true ? '64px' : '200px'" class="aside">
                    <div class="toggleAside" @click="toggleAside">| | |</div>
                    <el-menu
                        unique-opened
                        active-text-color="rgb(95,158,160)"
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        :router="true"
                        :default-active="activeItem">
                        <!--1级-->
                        <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-folder-opened"></i>
                                <span>{{item.authName}}</span>
                            </template>
                            <el-menu-item @click="activeItemChange('/'+child.path)" :index="'/'+child.path"
                                          v-for="child in item.children" :key="child.id">
                                <template slot="title">
                                    <i class="el-icon-loading"></i>
                                    <span>{{child.authName}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!--右边展示区-->
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                menuList: [],
                isCollapse: false,
                activeItem: ''
            }
        },
        name: 'Home',
        created() {
            this.getMenuList();
            this.activeItem = window.sessionStorage.getItem('path');
        },
        methods: {
            loginOut() {
                window.sessionStorage.clear();
                this.$router.push('login')
            },
            getMenuList() {
                this.$http.get('menus')
                    .then((res) => {
                        let {data, meta} = res.data;
                        if (meta.status === 200) {
                            // this.$notify.success('请求菜单数据成功');
                            this.menuList = data;
                        } else {
                            this.$notify.error('请求菜单数据失败');
                        }
                    })
                    .catch(() => {
                        console.log(this.$notify.error('发送查询表单列表数据请求失败'))
                    })
            },
            toggleAside() {
                this.isCollapse = !this.isCollapse;
            },
            activeItemChange(path) {
                window.sessionStorage.setItem('path', path);
                this.activeItem = path;
            }
        }
    }
</script>

<style lang="less" scoped>
    .body-container {
        height: 100%;
    }

    .whole {
        height: 100%;
    }

    .header {
        box-sizing: border-box;
        background-color: white;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;

        .title {
            height: 100%;
            display: flex;
            align-items: center;

            span {
                margin-left: 10px;
                font-size: 24px;
            }

            img {
                height: 100%;
            }
        }
    }

    .aside {
        background-color: cadetblue;
        .toggleAside {
            text-align: center;
            background-color: white;
            padding: 3px 0;
            box-sizing: border-box;
            transition: 0.1s;
            height: 50px;
            line-height: 50px;
        }

        .toggleAside:hover {
            cursor: pointer;
            background-color: cadetblue;
            color: white;
            border-color: darkcyan;
        }
        .el-menu{
            border: none;
        }
    }

    .main {
        background-color: rgb(233,237,241);
        border-radius: 20px;
    }

</style>
